<template>
	<view  class="wrapper">
		<view v-if="count" class="content">
			<view class="inform-item" @click="link">
				<view class="inform-left">
					<view class="inform-img">
						<image src="../../static/images/pt-icon.png"></image>
					</view>
					
					<view class="inform-text">
						<view class="inform-t">平台通知</view>
						<view class="inform-p">{{title?title[0].title:'暂无标题'}}</view>
					</view>
				</view>
				
				<view class="inform-num">
					<view class="-num">{{count}}</view>
					
					<view class="inform-icon">
						<image src="../../static/images/right-icon.png"></image>
					</view>
				</view>
			</view>
			
			<!-- <view class="inform-item">
				<view class="inform-left">
					<view class="inform-img">
						<image src="../../static/images/pt-icon01.png"></image>
					</view>
					
					<view class="inform-text">
						<view class="inform-t">在线客服</view>
						<view class="inform-p">亲，你好，请问有什么可以帮您？</view>
					</view>
				</view>
				
				<view class="inform-icon">
					<image src="../../static/images/right-icon.png"></image>
				</view>
			</view> -->
		</view>
		<view v-else class="is-more">
			暂无通知
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count:'',
				title:''
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getNotice();
		},
		methods: {
			getNotice:function(){
				this.api._get('User/getNotice').then(res=>{
					if(res.status == 200){
						this.count = res.data.count
						this.title = res.data.list
						 uni.setStorageSync('getNotice', res.data);
					}else{
						this.$api.errorMsg(res.message);
					}
					
				})
			},
			link() {
				uni.navigateTo({
				    url: '/pages/user/platformInform'
				});
			},
			
		}
	}
</script>

<style lang="scss">
	@import url('../../common/common.css');
	
	.content {
		padding: 30upx;
	}
	.inform-item {
		padding: 35upx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2upx solid #e6e6e6;
		.inform-left {
			display: flex;
			align-items: center;
			width: 85%;
			.inform-img {
				margin-right: 18upx;
				width: 92upx;
				height: 92upx;
				border-radius: 50%;
				image {
					border-radius: 50%;
				}
			}
			.inform-text {
				width: 75%;
				.inform-t {
					font-size: 32upx;
					font-weight: bold;
					line-height: 45upx;
					color: #333;
				}
				.inform-p {
					font-size: 24upx;
					line-height: 45upx;
					color: #999;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
			}
		}
		.inform-icon {
			width: 12upx;
			height: 22upx;
		}
	}
	.inform-num {
		display: flex;
		align-items: center;
		.-num {
			display: inline-block;
			padding: 0 15upx;
			margin-right: 20upx;
			background: #ff5932;
			font-size: 24upx;
			color: #fff;
			line-height: 40upx;
			border-radius: 50%;
		}
	}
	
	.is-more{
		padding: 50upx 0;
		text-align: center;
		font-size: 28upx;
		color: #B2B2B2;
	}
</style>
